<template>
  <div class="cockpit-container">
    <header>
      <el-page-header @back="goBack" content="数字康养驾驶舱"> </el-page-header>
    </header>
    <main>
      <!-- 用户数据 -->
      <div class="data-content">
        <h2>用户数据</h2>
        <p>User Data</p>
        <div class="content">
          <div class="s-content" @click="jumpPage('个人用户数据')">
            <div class="num">
              <countTo :endVal="clientNum" :duration="1000"></countTo>
            </div>
            <div class="title">个人用户</div>
          </div>
          <div class="s-content" @click="jumpPage('组织用户数据')">
            <div class="num">
              <countTo :endVal="businessNum" :duration="1000"></countTo>
            </div>
            <div class="title">组织用户</div>
          </div>
        </div>
      </div>
      <!-- 交易金额 -->
      <div class="data-content">
        <h2>交易金额</h2>
        <p>Transaction Amount</p>
        <div class="content">
          <div class="s-content">
            <div class="num">
              <countTo :endVal="pPrice" :duration="1000"></countTo>
            </div>
            <div class="title">个人用户</div>
          </div>
          <div class="s-content">
            <div class="num">
              <countTo :endVal="num" :duration="1000"></countTo>
            </div>
            <div class="title">组织用户</div>
          </div>
        </div>
      </div>
      <!-- 预警信息 -->
      <div class="data-content">
        <h2>预警信息</h2>
        <p>Warning Information</p>
        <div class="content">
          <div class="s-content">
            <div class="num">
              <countTo :endVal="num" :duration="1000"></countTo>
            </div>
            <div class="title">个人用户</div>
          </div>
          <div class="s-content">
            <div class="num">
              <countTo :endVal="num" :duration="1000"></countTo>
            </div>
            <div class="title">组织用户</div>
          </div>
        </div>
      </div>
      <!-- 订单数据 -->
      <div class="data-content">
        <h2>订单数据</h2>
        <p>Order Data</p>
        <div class="content">
          <div class="s-content">
            <div class="num">
              <countTo :endVal="orderDataNum" :duration="1000"></countTo>
            </div>
            <div class="title">业务数</div>
          </div>
        </div>
      </div>
      <!--电商数据-->
      <div class="data-content">
        <h2>电商数据</h2>
        <p>Electricity Data</p>
        <div class="content">
          <div class="s-content" @click="jumpPage('电商用户')">
            <div class="num">
              <countTo :endVal="electricityUsers" :duration="1000"></countTo>
            </div>
            <div class="title">用户</div>
          </div>
          <div class="s-content" @click="jumpPage('电商商品')">
            <div class="num">
              <countTo :endVal="electricityGoods" :duration="1000"></countTo>
            </div>
            <div class="title">商品</div>
          </div>
          <div class="s-content" @click="jumpPage('电商订单')">
            <div class="num">
              <countTo :endVal="electricityOrder" :duration="1000"></countTo>
            </div>
            <div class="title">订单</div>
          </div>
          <div class="s-content">
            <div class="num">
              <countTo :endVal="orderAmount" :duration="1000"></countTo>
            </div>
            <div class="title">总金额</div>
          </div>
        </div>
      </div>
      <!-- 供应链数据 -->
      <div class="data-content">
        <h2>供应链数据</h2>
        <p>Supply Chain Data</p>
        <div class="content">
          <div
            class="s-content"
            v-for="(item, index) in purchaseRecord"
            :key="index"
            @click="jumpPage('采购记录')"
          >
            <div class="num">
              <countTo :endVal="item.number" :duration="1000"></countTo>
            </div>
            <div class="title">{{ item.year }}采购记录</div>
          </div>
          <div
            class="s-content"
            v-for="(item, index) in salesRecord"
            :key="index"
            @click="jumpPage('销售记录')"
          >
            <div class="num">{{ item.number }}</div>
            <div class="title">{{ item.year }}销售记录</div>
          </div>
          <div class="s-content" @click="jumpPage('库存类别')">
            <div class="num">
              <countTo :endVal="inventory" :duration="1000"></countTo>
            </div>
            <div class="title">库存类别</div>
          </div>
        </div>
      </div>
      <!-- 机构数据 -->
      <div class="data-content">
        <h2>机构数据</h2>
        <p>Institutional Data</p>
        <div class="content">
          <div
            class="s-content"
            v-for="(item, index) in institutionalData"
            :key="index"
            @click="jumpPage(item.name)"
          >
            <div class="num">
              <countTo :endVal="item.number" :duration="1000"></countTo>
            </div>
            <div class="title">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <!-- 其它业务数据 -->
      <div class="data-content">
        <h2>其它业务数据</h2>
        <p>Other Business Data</p>
        <div class="content">
          <div class="s-content">
            <div class="num">
              <countTo :endVal="num" :duration="1000"></countTo>
            </div>
            <div class="title">服务对象的所在地</div>
          </div>
          <div class="s-content">
            <div class="num">
              <countTo :endVal="num" :duration="1000"></countTo>
            </div>
            <div class="title">机构数据</div>
          </div>
          <div class="s-content">
            <div class="num">
              <countTo :endVal="num" :duration="1000"></countTo>
            </div>
            <div class="title">医生多少个</div>
          </div>
          <div class="s-content">
            <div class="num">
              <countTo :endVal="num" :duration="1000"></countTo>
            </div>
            <div class="title">服务人员</div>
          </div>
          <div class="s-content">
            <div class="num">
              <countTo :endVal="num" :duration="1000"></countTo>
            </div>
            <div class="title">覆盖居民</div>
          </div>
          <div class="s-content">
            <div class="num">
              <countTo :endVal="num" :duration="1000"></countTo>
            </div>
            <div class="title">设备数量</div>
          </div>
          <div class="s-content">
            <div class="num">
              <countTo :endVal="num" :duration="1000"></countTo>
            </div>
            <div class="title">设备动态数据</div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>
<script>
import countTo from "vue-count-to";
export default {
  name: "cockpit",
  data() {
    return {
      num: 0,
      pPrice: 11110,
      orderDataNum: 2,
      businessNum: 0,
      clientNum: 0,
      amount: 0,
      list: [],
      institutionalData: [],
      purchaseRecord: [],
      salesRecord: [],
      inventory: 0,
      electricityUsers: 0,
      electricityGoods: 0,
      electricityOrder: 0,
      orderAmount: 0,
    };
  },
  components: { countTo },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    /*
      养老院类型
      1：养老服务机构
      2：乡镇级居家养老服务中心
      3：民政服务
      4：社区邻礼汇综合体
      5：便民服务中心
      */
    jumpPage(title) {
      if (
        title == "养老服务机构" ||
        title == "乡镇级居家养老服务中心" ||
        title == "民政服务" ||
        title == "社区邻礼汇综合体" ||
        title == "便民服务中心" ||
        title == "未知"
      ) {
        let type = "";
        switch (title) {
          case "养老服务机构":
            type = 1;
            break;
          case "乡镇级居家养老服务中心":
            type = 2;
            break;
          case "民政服务":
            type = 3;
            break;
          case "社区邻礼汇综合体":
            type = 4;
            break;
          case "便民服务中心":
            type = 5;
            break;
          default:
            type = "";
            break;
        }
        this.$router.push({
          path: "/cockpit/dataDetail",
          query: { title, type },
        });
      } else {
        this.$router.push({ path: "/cockpit/dataDetail", query: { title } });
      }
    },
    //查询企业用户数量
    async getBusinessNum() {
      let res = await this.$base.postForm(1, "/datadisplay/user/countUserB");
      this.businessNum = res.data.count;
    },
    //查询客户数量
    async getClientNum() {
      let res = await this.$base.postForm(1, "/datadisplay/user/countUserC");
      this.clientNum = res.data.count;
    },
    //查询药店总数
    async getDrugStoreNum() {
      let res = await this.$base.postForm(
        1,
        "/datadisplay/institution/countDrugstore"
      );
      let arrayItem = {
        name: "药店",
        number: res.data.result,
      };
      this.institutionalData.push(arrayItem);
      this.getOldPeopleIsHomeNum();
    },
    //查询养老机构总数
    async getOldPeopleIsHomeNum() {
      let res = await this.$base.postForm(
        1,
        "/datadisplay/institution/countRestHome"
      );
      this.institutionalData = this.institutionalData.concat(res.data.result);
    },
    //查询医院总数
    async getHospitalNum() {
      let res = await this.$base.postForm(
        1,
        "/datadisplay/institution/countHospital"
      );
      let arrayItem = {
        name: "医院",
        number: res.data.result,
      };
      this.institutionalData.push(arrayItem);
      this.getDrugStoreNum();
    },
    //并发获取机构数据
    getInstitutionData() {
      let getDrugStoreNum = "/datadisplay/institution/countDrugstore";
      let getOldPeopleIsHomeNum = "/datadisplay/institution/countRestHome";
      let getHospitalNum = "/datadisplay/institution/countHospital";
      this.$base.postAll([
        getDrugStoreNum,
        getOldPeopleIsHomeNum,
        getHospitalNum,
      ]);
    },
    //查询采购记录和
    async getPurchaseRecord() {
      let res = await this.$base.postForm(
        1,
        "/datadisplay/supplyChain/countScPurchase"
      );
      this.purchaseRecord = res.data.result;
    },
    //查询销售记录和
    async getCountScSell() {
      let res = await this.$base.postForm(
        1,
        "/datadisplay/supplyChain/countScSell"
      );
      this.salesRecord = res.data.result;
    },
    //库存类别
    async getFindAllScStock() {
      let data = {
        pageSize: 99999,
        startPage: 1,
      };
      let res = await this.$base.postForm(
        1,
        "/datadisplay/supplyChain/findAllScStock",
        data
      );
      this.inventory = res.data.pageInfo.total;
    },
    //电商数据,商品数量
    async getGoodsNum() {
      let res = await this.$base.getAjax(1, "/datadisplay/youzan/countGoods");
      this.electricityGoods = res.data.count;
    },
    //订单数量
    async getOrderNum() {
      let res = await this.$base.getAjax(1, "/datadisplay/youzan/countOrder");
      this.electricityOrder = res.data.count;
    },
    //用户数量
    async getUserNum() {
      let res = await this.$base.getAjax(1, "/datadisplay/youzan/countUser");
      this.electricityUsers = res.data.count;
    },
    //订单总金额
    async getOrderAmount() {
      let res = await this.$base.getAjax(1, "/datadisplay/youzan/sumOrderAmount");
      this.orderAmount = res.data.orderAmount;
    },
  },
  created() {
    try {
      this.getBusinessNum();
      this.getClientNum();

      this.getPurchaseRecord();
      this.getCountScSell();
      this.getFindAllScStock();

      this.getHospitalNum();

      this.getUserNum();
      this.getGoodsNum();
      this.getOrderNum();
      this.getOrderAmount();
    } catch (error) {}
  },
};
</script>
<style lang="scss" scoped>
.cockpit-container {
  min-height: calc(100vh - 60px);
  padding: 0 20px 20px;
  box-sizing: border-box;
  background-color: #fff;
}
header {
  position: fixed;
  z-index: 3;
  left: -20px;
  width: 100%;
  padding: 20px 40px;
  background-color: #fff;
  border-bottom: 1px solid #ebeef5;
}
main {
  position: relative;
  top: 84px;
  display: grid;
  margin-bottom: 90px;
  grid-template-columns: auto auto auto auto;
}
.data-content {
  padding: 20px;
  border-radius: 10px;
  margin: 0 20px 20px 0;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #ebeef5;
  h2 {
    color: #333;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  p {
    color: #999;
    font-size: 14px;
    margin-bottom: 10px;
  }
  .content {
    display: grid;
    .s-content {
      padding: 10px;
      cursor: pointer;
      margin-bottom: 4px;
      border-radius: 4px;
      border: 1px solid #ebeef5;
      .num {
        font-size: 20px;
        color: #3c6bd6;
        font-weight: bold;
        margin-bottom: 8px;
      }
      .title {
        font-size: 16px;
      }
    }
    .s-content:hover {
      background-color: #fafafa;
    }
    .s-content:last-child {
      margin-bottom: 0;
    }
  }
}
.data-content:hover {
  transition: 0.3s;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.data-content:nth-child(4n) {
  margin-right: 0;
}
</style>